@charset "utf-8";
//variables
$font-family: 'Microsoft Yahei','Hiragino Sans GB',"WenQuanYi Micro Hei",sans-serif,arial !default;
//color
$body-bg: #f4f7f9 !default;
$black-color: black !default;
$black-grey: #81828c !default;
$red-color: red !default;
$white-color: white !default;
$default-color: #424451 !default;
$blue-color: #009aff !default;
$blue-light: #33a8ff !default;
$default-light-color: #81828c !default;
$border-color: #e7e7e7 !default;
$orange: #ff4200 !default;
$grey-color: #a9acb3 !default;

//font-size
$font12: 12px !default;
$font13: 13px !default;
$font14: 14px !default;
$font16: 16px !default;
$font18: 18px !default;
$font20: 20px !default;
//border-radius
@mixin radius($radius: 5px){
    border-radius: $radius;
}
@mixin default-link-hover{
    color: $default-color;
    &:hover,&:focus{
        color: $blue-color;
    }
}
@mixin active-link-hover{
    color: $blue-color;
    &:hover,&:focus{
        color: #1b609b;
    }
}
@mixin placeholder($color: $default-color){
    input::-webkit-input-placeholder {
        color: $color; 
    }
    input:-moz-placeholder {
        color: $color; 
    }
    input::-moz-placeholder {
        color: $color; 
    }
    input:-ms-input-placeholder {
        color: $color; 
    }
}

//position
@mixin absolute-center-left($width){
    position: absolute;
    left: 50%;
    width: $width;
    margin-left: -$width / 2;
}
@mixin absolute-center-top($width){
    position: absolute;
    top: 50%;
    width: $width;
    margin-left: -$width / 2;
}
@mixin absolute-center-center($height,$width){
    @include absolute-top-left(50%,50%);
    margin-top: -$height / 2;
    margin-left: -$width / 2;
    height: $height;
    width: $width;
}
@mixin absolute-top-left($top: 0,$left: 0){
    position: absolute;
    top: $top;
    left: $left;
}
@mixin absolute-top-center($width){
    position: absolute;
    left: 50%;
    margin-left: -$width / 2;
    width: $width;
}
@mixin absolute-top-right($top: 0,$right: 0){
    position: absolute;
    top: $top;
    right: $right;
}
@mixin absolute-bottom-left($bottom: 0,$left: 0){
    position: absolute;
    bottom: $bottom;
    left: $left;
}
@mixin absolute-bottom-right($bottom: 0,$right: 0){
    position: absolute;
    bottom: $bottom;
    right: $right;
}

//height
@mixin line-height($height){
    height: $height;
    line-height: $height;
}
@mixin line-height-border($height){
    height: $height;
    line-height: $height - 2;
}

//border
@mixin border-bottom($border-color: #ddd){
    border-bottom: 1px solid $border-color;
}
@mixin border($border-color: #ddd){
    border: 1px solid $border-color;
}

//model
@mixin model($border-color: #a9b1c9){
    > .hd{
        @include border-bottom($border-color);
        padding: 0 10px 8px;
        margin-bottom: 20px;
        position: relative;
        zoom: 1;
        h3,h4{
        	display: inline-block;
        	font-size: $font18;
            line-height: normal;
        }
    }
    > .ft{
        @include line-height(40px);
        border-top: 1px solid #c1c8db;
        background: #f4f7f9;
        padding: 0 10px;
        margin: 0 -14px -10px;
    }
    .nav-tabs{
    	@include nav-tabs;
        border: none;
        margin: 0 -10px -8px;
        *overflow: hidden;
    }
}
@mixin model-border($border-color: #c1c8db){
    @include model;
    background: $white-color;
    border: 1px solid $border-color;
}
@mixin toolbar-top($bg-color: #fff,$border-color: #e7e7e7){
    background: $bg-color;
    border: 1px solid $border-color;
    position: relative;
    &:before, &:after {
        content: ' ';
        height: 0;
        position: absolute;
        left: 50%;
        margin-left: -5px;
        width: 0;
        border: 5px solid transparent; /* arrow size */
    }
    &:before {
        border-bottom-color: $bg-color;  /* arrow color */
        top: -10px;
        z-index: 2;
    }
    &:after {
        border-bottom-color: $border-color;  /* arrow color */
        top: -11px;
        z-index: 1;
    }
}
@mixin toolbar-bottom($bg-color: #fff,$border-color: #e7e7e7){
    @include toolbar-top;
    &:before {
        border-color: transparent;
        border-top-color: $bg-color;  /* arrow color */
        top: auto;
        bottom: -10px;
    }
    &:after {
        border-color: transparent;
        border-top-color: $border-color;  /* arrow color */
        top: auto;
        bottom: -11px;
    }
}

@mixin toolbar-left($bg-color: #ffffff,$border-color: #e7e7e7){
  background: $bg-color;
  border: 1px solid $border-color;
  position: relative;
  &:before, &:after {
    content: ' ';
    height: 0;
    position: absolute;
    left: 50%;
    margin-left: -5px;
    width: 0;
    border: 5px solid transparent; /* arrow size */
  }
  &:before {
    border-right-color: $bg-color;  /* arrow color */
    margin-left: -8px;
    z-index: 2;
  }
  &:after {
    border-right-color: $border-color;  /* arrow color */
    left: -11px;
    z-index: 1;
  }
}

@mixin text-ellipsis{
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space:nowrap;
    word-break:keep-all;
    max-width: 100%;
}

@mixin disable-select {
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

@mixin clearfix {
    &:before,&:after{
        content: "";
        display: table;
    }
    &:after {
        clear: both;
    }
}

@mixin circle($width:100px,$border-width:0,$border-color:#fff){
    overflow: hidden;
    >img{width: 100%;}
    @if($border-width!=0){
        width: ($width)-$border-width;
        height: ($width)-$border-width;
        border: solid $border-width $border-color;
        border-radius: $width+($border-width);
    }@else if($border-width==0){
        width: $width;
        height: $width;
        border-radius: $width;
    }@else {
        width: $width;
        height: $width;
        border-radius: $width;
    }
}



